<template>
    <!-- 坐席分配情况弹窗 -->
    <drag-modal  :visible="visible" :title="modalTitle" @cancel="onModalClose" width="1000px" >
        <div class="form-search-wrapper" style="min-height:200px;">
            <a-table :scroll="{ x: auto, y: 400}" :columns="columns" :data-source="dataSource"  bordered :pagination="pagination"  :loading="isLoadingSearching">
                <div slot="userNameFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-input  :placeholder="`搜索${column.title}`" v-model="postData[column.dataIndex]" @pressEnter="() => {postData.page.current = 1;pageList();}" @ style="width: 188px; margin-bottom: 8px; display: block;"  />
                    <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => {postData[column.dataIndex]='';pageList();}">
                        重置
                    </a-button>
                    <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => {postData.page.current = 1;pageList();}">
                        搜索
                    </a-button>
                </div>
                <div slot="officeNameFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-input  :placeholder="`搜索${column.title}`" v-model="postData[column.dataIndex]" @pressEnter="() => {postData.page.current = 1;pageList();}" @ style="width: 188px; margin-bottom: 8px; display: block;"  />
                    <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => {postData[column.dataIndex]='';pageList();}">
                        重置
                    </a-button>
                    <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => {postData.page.current = 1;pageList();}">
                        搜索
                    </a-button>
                </div>
                <div slot="tenantNameFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-input  :placeholder="`搜索${column.title}`" v-model="postData[column.dataIndex]" @pressEnter="() => {postData.page.current = 1;pageList();}" @ style="width: 188px; margin-bottom: 8px; display: block;"  />
                    <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => {postData[column.dataIndex]='';pageList();}">
                        重置
                    </a-button>
                    <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => {postData.page.current = 1;pageList();}">
                        搜索
                    </a-button>
                </div>
                <div slot="loginAccountFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-input  :placeholder="`搜索${column.title}`" v-model="postData[column.dataIndex]" @pressEnter="() => {postData.page.current = 1;pageList();}" @ style="width: 188px; margin-bottom: 8px; display: block;"  />
                    <a-button size="small" style="width: 90px;margin-right:8px;" @click="() => {postData[column.dataIndex]='';pageList();}">
                        重置
                    </a-button>
                    <a-button type="primary" icon="search" size="small" style="width: 90px;" @click="() => {postData.page.current = 1;pageList();}">
                        搜索
                    </a-button>
                </div>
                 <!-- 操作 -->
                <a slot="operation" slot-scope="text, record" >
                    <a-row v-if="!disabledUserIds.includes(record.userId)">
                        <a-button type="primary" size="small" @click="selectItem(record)">分配</a-button>
                    </a-row>
                </a>
            </a-table>
        </div>
    </drag-modal>
</template>

<script>
import { mapState } from "vuex";
import {  pageCrmCallAgentUserVo } from "@/api/crm/call/agentManage";

export default {
    name: "PageCrmCallAgentUserModal",
    data () {
        const columns = [
            {
                align: "left",
                title: "用户姓名",
                dataIndex: "userName",
                width: 120,
                scopedSlots: {
                    filterDropdown: 'userNameFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
             {
                align: "left",
                title: "部门名称",
                dataIndex: "officeName",
                width: 100,
                scopedSlots: {
                    filterDropdown: 'officeNameFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                align: "left",
                title: "账户名称",
                dataIndex: "loginAccount",
                width: 100,
                scopedSlots: {
                    filterDropdown: 'loginAccountFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                align: "center",
                title: "绑定时间",
                dataIndex: "bindingDate",
                width: 100,
            },
            {
                align: "center",
                title: "坐席状态",
                dataIndex: "status",
                width: 80,
                customRender: (text, row, index) => {
                    //状态 0：未启用 1.启用 2.暂停
                    let resultTex = null;
                    switch(text){
                        case 0:resultTex = <sapn>未启用</sapn>;break;
                        case 1:resultTex = <sapn style="color: green">启用</sapn>;break;
                        case 2:resultTex = <sapn style="color: red">暂停</sapn>;break;
                    }
                    return resultTex;
                },
            },
            {
                align: "center",
                title: "操作",
                dataIndex: "operation",
                width: 100,
                scopedSlots: { customRender: 'operation' },
            },
        ];
        return {
           visible: false,
           modalTitle: "",
           disabledUserIds:[],
           columns,
           dataSource: [],
           postData: {
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        onModalOpen(data){
            Object.assign(this,data);
            console.log("---onModalOpen---",this.disabledUserIds,data);
            this.visible = true;
            this.pageList();
        },
        onModalClose(){
            this.visible = false;
            this.postData = {
                page:{
                    current: 1,
                    size: 20
                }
            }    
        },
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageCrmCallAgentUserVo(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.dataSource = records;
                    this.dataSource.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //选中
        selectItem(item){
            this.$emit("callBack",item);
        }
    }
}
</script>

<style>

</style>